import React, { useContext } from 'react';
import { NavLink } from 'react-router-dom';
import { useHistory } from "react-router-dom";
import { Space } from 'antd'

import styles from './style.module.scss';

import { CommonContext } from 'components/Common';

// 用户头像信息
export default function Navigate(props) {
    const History = useHistory();
    let {
        showText = true,
        noStatus = false,
        direction = 'horizontal',
        split = '/',
        size = 'small',
    } = props;
    let { logged, logout } = useContext(CommonContext);
    const logoutHandle = () => {
        logout()
        History.push("/main");
        return () => {
            logout()
        };
    }
    return (
        <div className={styles.link}>
            {showText ? <span>网站导航：</span> : ''}
            <Space {...{ direction, split, size }}>
                <NavLink activeStyle={{ fontWeight: 'bold', color: '#607D8B' }} to="/main">首页</NavLink>
                <NavLink activeStyle={{ fontWeight: 'bold', color: '#607D8B' }} to="/home">个人主页</NavLink>
                <NavLink activeStyle={{ fontWeight: 'bold', color: '#607D8B' }} to="/accounts">账户管理</NavLink>
                {!noStatus && logged
                    ? <a onClick={logoutHandle}>退出</a>
                    : <>
                        <NavLink activeStyle={{ fontWeight: 'bold', color: '#607D8B' }} to="/login">登录</NavLink>
                        <NavLink activeStyle={{ fontWeight: 'bold', color: '#607D8B' }} to="/register">注册</NavLink>
                    </>}
            </Space>
        </div>
    )
}